<template>
  <view class="page-view" style="padding-bottom: 100rpx">
    <!-- 搜索区域 -->
    <view class="search-view">
      <view class="search-g-box flex-star">
				<image class="search-icon" src="/static/images/icon/search-icon.png" mode=""></image>
        <uni-easyinput @input="input" v-model="searchForm.childName" placeholder="输入小孩姓名" />
			</view>
    </view>
		<view class="filter-box flex-star">
			<uni-e-select v-model="searchForm.stageStatus" placeholder="阶段状态" :localdata="statusList"
				@change="change($event,1)"></uni-e-select>
			<uni-e-select v-model="searchForm.stageSummaryClass" placeholder="小结状态" :localdata="summaryList"
				@change="change($event,2)"></uni-e-select>
			<uni-e-select v-model="searchForm.hasClass" placeholder="是否上课" :localdata="hasClassList"
				@change="change($event,3)"></uni-e-select>
	
		</view>
    <!-- 列表区域 -->
    <view>
      <view class="list-view">
        <view class="list-view-item" v-for="item in list" :key="item.stageNo">
          <view class="list-view-item-info">
            <view class="list-view-item-info-left">
              <p class="title-0">{{ item.childName }}-{{ item.childAge }}</p>
              <p class="title-gray-28">
                L{{ item.stageNo }}-第{{ item.stageNo }}次计划
              </p>
              <p class="title-gray-26">进度：{{ item.stageCompleteClass }}</p>
            </view>
          </view>
          <view class="status-view">
            <view
              v-if="!item.stageStatus || item.stageStatus === 0"
              class="status-common status-label-0"
              >进行中</view
            >
            <view
              v-if="item.stageStatus === 1"
              class="status-common status-label-0"
              >待复测</view
            >
            <view
              v-if="item.stageStatus === 2"
              class="status-common status-label-0"
              >已完成</view
            >
          </view>
          <view class="list-view-item-btn">
            <view class="button btn-primary-plain"  @click="toPage('/pages/stage-plan/add')">阶段复测</view>
            <view class="button btn-info"  @click="toPage('/pages/stage-plan/plan')">阶段列表</view>
            <view class="button btn-info"  @click="toPage('/pages/stage-plan/plan')">复测记录</view>
            <view class="button btn-info"  @click="toPage('/pages/stage-plan/planDetail')">查看计划</view>
            <view class="button btn-primary"  @click="toPage('/pages/stage-plan/summary')">阶段小结</view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-height"></view>

    <view class="footer-submit flex-center">
      <view class="submit-btn"  @click="toPage('/pages/stage-plan/add')"> 新增阶段计划</view>
    </view>
    <!-- <view class="btn-view">
      <button
        @click="toPage('/pages/stage-plan/add')"
        type="primary"
        class="button-primary"
      >
        新增阶段计划
      </button>
    </view> -->
    <!-- <view @click="toPage('/pages/stage-plan/add')" class="add-icon"
      ><image src="./../../static/images/plan/add.png"></image
    ></view> -->
  </view>
</template>

<script>
import uniESelect from '@/components/uni-e-select.vue'
import DropdownTreeSelector from "@/components/dropdown-tree-selector/dropdown-tree-selector.vue";
import { listChild } from "@/api/stagePlan/stagePlan.js";
export default {
  components: { DropdownTreeSelector,uniESelect },
  data() {
    return {
      searchForm: {
        childName: "", //小孩名字
        stageStatus: "", //阶段状态：0-进行中，1-已完成，2-需复测
        stageSummaryClass: "", //小结状态：0-全部，1-需要小结
        hasClass: "", //是否有上课：0-没有，1-有
      },
      statusList: [
        {
   
          value: 0,
          text: "进行中",
        },
        {
          value: 1,
          text: "待复测",
        },
        {
          value: 2,
          text: "已完成",
        },
      ],
      summaryList: [
        {
          value: 0,
          text: "全部",
        },
        {
          value: 1,
          text: "需要小结",
        },
      ],
      hasClassList: [
        {
          value: 0,
          text: "没有",
        },
        {
          value: 1,
          text: "有",
        },
      ],
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    change(e, type) {
		console.log("e:", e);
		console.log("type:", type);
	},
    toPage(path) {
      this.$tab.navigateTo(path);
    },
    getList() {
      let data = this.searchForm;
      listChild(data).then((res) => {
        this.list = res.rows;
      });
    },
    handleSearch(val, field) {
      this.searchForm[field] = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@function pxtovw($px) {
  @return #{$px / 20 * 1}vw;
}
.form-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 控制主轴上的对齐方式 */
  align-items: center; /* 控制交叉轴上的对齐方式 */
}

.form-item {
  width: calc(32% - 10px); /* 根据需要调整列数，这里是三列 */

  margin-right: 10px;
}

/* 媒体查询 */
@media (max-width: 768px) {
  .form-item {
    width: calc(50% - 10px); /* 小屏幕下变为两列 */
  }
}

@media (max-width: 480px) {
  .form-item {
    width: 100%; /* 更小屏幕下变为单列 */
  }
}
.preparation-container {
  .form-item {
    margin: 24rpx;
    border-radius: 12rpx;
  }
  .btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
  }
}
// 列表
.list-view-item {
  position: relative;
  width: pxtovw(950);

background: #FFFFFF;
border-radius: pxtovw(20);
}
.list-view-item-info {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e9e9e9;
  .list-view-item-info-left {
    width: 60%;
    padding-bottom: 34rpx;
  }
}
.status-view {
  position: absolute;
  right: 0;
  top: 10%;
}
.list-view-item-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 30rpx;
}

.add-icon {
  position: fixed;
  bottom: 0;
  right: 4%;
  image {
    width: 120rpx;
    height: 120rpx;
  }
  z-index: 999;
}
</style>
